<template>
	<view class="index_main">
		<view class="type_name">
			小游戏
		</view>
		<view class="game_content">
			<view class="game" v-for="(item,index) in games" :key="index" @click="toGameDetailPage(item.name)">
				<view class="game_icon">
					<image :src="item.img" mode=""></image>
				</view>
				<view class="game_right">
					<view class="game_name">
						{{item.name}}
					</view>
					<view class="game_desc">
						{{item.description}}
					</view>
				</view>
			</view>
		</view>

		<view class="practical_utils_name">
			实用工具
		</view>
		<view class="practical_utils">
			<view class="per_util" v-for="(item,index) in utils" :key="index" @click="toUtilDetailPage(item.name)">
				<view class="util_icon">
					<image :src="item.img" mode=""></image>
				</view>
				<view class="util_right">
					<view class="util_name">
						{{item.name}}
					</view>
					<view class="util_desc">
						{{item.description}}
					</view>
				</view>
			</view>
		</view>

		<view class="lives">
			生活
		</view>
		<view class="lives_area">
			<view class="per_live" v-for="(item,index) in lives" :key="index" @click="toLiveDetailPage(item.name)">
				<view class="live_icon">
					<image :src="item.img" mode=""></image>
				</view>
				<view class="live_right">
					<view class="live_name">
						{{item.name}}
					</view>
					<view class="live_desc">
						{{item.description}}
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		dateToString
	} from '../../static/js/dateUtil.js'
	export default {
		data() {
			return {
				games: [{
						name: '2048',
						description: '休闲益智',
						img: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fi-1.edowning.net%2F2021%2F5%2F28%2F2fb14806-d345-4536-81f5-a1623d42509f.png&refer=http%3A%2F%2Fi-1.edowning.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1674703338&t=43003068256852ef45a575aab531c2f0'
					},
					{
						name: '敲木鱼',
						description: '娱乐',
						img: 'https://img0.baidu.com/it/u=281196720,268160714&fm=253&fmt=auto&app=138&f=JPEG?w=600&h=400'
					},
					{
						name: '色弱测试',
						description: '仅为娱乐性质',
						img: '../../static/img/icons/color-plant.png'
					},
					{
						name: '手持弹幕',
						description: '搭讪，表白，接人',
						img: '../../static/img/icons/danmu.png'
					},
				],
				utils: [{
						name: '二维码生成器',
						description: '一键生成二维码',
						img: '../../static/img/icons/qrcode.png'
					},
					{
						name: 'RMB大写转换',
						description: '输入金额转成大写',
						img: '../../static/img/icons/rmb.png'
					},
					{
						name: '随机数字',
						description: '随机生成数字',
						img: '../../static/img/icons/number.png'
					},
					{
						name: '城市天气',
						description: '你所在城市的天气',
						img: '../../static/img/icons/weather.png'
					}
				],
				lives: [{
						name: '每日一言',
						description: '随机获取一句话',
						img: '../../static/img/icons/message1.png'
					},
					{
						name: '纪念日倒数日',
						description: '计算天数',
						img: '../../static/img/icons/calendar.png'
					},
				]
			}
		},
		onLoad() {
			// 加载分享菜单
			this.loadingShareMenu();
		},
		methods: {
			// 去游戏详情页面
			toGameDetailPage(name) {
				switch (name) {
					case '2048':
						uni.navigateTo({
							url: '/pages/games/2048'
						})
						break;
					case '敲木鱼':
						uni.navigateTo({
							url: '/pages/games/beatWoodFish'
						})
						break;
					case '色弱测试':
						uni.navigateTo({
							url: '/pages/games/achromatismTest'
						})
						break;
					case '手持弹幕':
						uni.navigateTo({
							url: '/pages/games/barrage'
						})
						break;
					default:
						break;
				}
			},
			// 去工具详情页面
			toUtilDetailPage(name) {
				switch (name) {
					case '二维码生成器':
						uni.navigateTo({
							url: '/pages/smallUtils/qrcodeGenerator'
						})
						break;
					case 'RMB大写转换':
						uni.navigateTo({
							url: '/pages/smallUtils/rmbReverse'
						})
						break;
					case '随机数字':
						uni.navigateTo({
							url: '/pages/smallUtils/randomNumGenerator'
						})
						break;
					case '城市天气':
						uni.navigateTo({
							url: '/pages/smallUtils/weather'
						})
						break;
					default:
						break;
				}
			},
			// 去生活工具详情页面
			toLiveDetailPage(name) {
				switch (name) {
					case '每日一言':
						uni.navigateTo({
							url: '/pages/lives/everydayWords'
						})
						break;
					case '纪念日倒数日':
						uni.navigateTo({
							url: '/pages/lives/festival'
						})
						break;
					default:
						break;
				}
			},
			
			// 加载分享菜单
			loadingShareMenu() {
				wx.showShareMenu({
					withShareTicket: true,
					//设置下方的Menus菜单，才能够让发送给朋友与分享到朋友圈两个按钮可以点击
					menus: ["shareAppMessage", "shareTimeline"]
				})
			},
		},
	}
</script>

<style lang="less" scoped>
	.index_main {
		width: 100%;
		min-height: 100vh;
		background-color: #fffae8;
		padding-top: 15px;

		.game_content {
			min-height: 140px;
			display: flex;
			flex-wrap: wrap;

			.game {
				width: 160px;
				height: 60px;
				background-color: #8dd3d3;
				display: flex;
				justify-content: space-around;
				align-items: center;
				margin-left: 16px;
				border-radius: 10px;
				margin-top: 10px;
				margin-bottom: 10px;
				box-shadow: 2px 2px 4px #a5a5a5;

				.game_icon {
					width: 40px;

					image {
						width: 35px;
						height: 35px;
						border-radius: 50%;
					}
				}

				.game_right {
					width: 100px;

					.game_name {
						font-size: 18px;
						color: #515151;
						font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
					}

					.game_desc {
						font-size: 12px;
						color: #949494;
					}
				}
			}
		}

		.type_name {
			font-size: 18px;
			font-weight: 600;
			color: #717881;
			width: 100px;
			margin-left: 20px;
		}

		.practical_utils_name {
			font-size: 18px;
			font-weight: 600;
			color: #717881;
			width: 100px;
			margin-left: 20px;
			margin-top: 15px;
		}

		.lives {
			font-size: 18px;
			font-weight: 600;
			color: #717881;
			width: 100px;
			margin-left: 20px;
			margin-top: 15px;
		}

		.lives_area {
			min-height: 140px;
			display: flex;
			flex-wrap: wrap;

			.per_live {
				width: 160px;
				height: 60px;
				background-color: #8dd3d3;
				display: flex;
				justify-content: space-around;
				align-items: center;
				margin-left: 16px;
				border-radius: 10px;
				margin-top: 10px;
				margin-bottom: 10px;
				box-shadow: 2px 2px 4px #a5a5a5;

				.live_icon {
					width: 40px;

					image {
						width: 35px;
						height: 35px;
						border-radius: 50%;
					}
				}

				.live_right {
					width: 100px;

					.live_name {
						font-size: 16px;
						color: #515151;
						font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
					}

					.live_desc {
						font-size: 12px;
						color: #949494;
					}
				}
			}
		}

		.practical_utils {
			min-height: 140px;
			display: flex;
			flex-wrap: wrap;

			.per_util {
				width: 160px;
				height: 60px;
				background-color: #8dd3d3;
				display: flex;
				justify-content: space-around;
				align-items: center;
				margin-left: 16px;
				border-radius: 10px;
				margin-top: 10px;
				margin-bottom: 10px;
				box-shadow: 2px 2px 4px #a5a5a5;

				.util_icon {
					width: 40px;

					image {
						width: 35px;
						height: 35px;
						border-radius: 50%;
					}
				}

				.util_right {
					width: 100px;

					.util_name {
						font-size: 16px;
						color: #515151;
						font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
					}

					.util_desc {
						font-size: 12px;
						color: #949494;
					}
				}
			}
		}
	}
</style>
